<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			body {
				background-color: mediumaquamarine;
			}

			#box {
				display: flex;
				flex-direction: column;
				border-radius: 20px;
				overflow: hidden;
				margin: 10px;
				height: 500px;
				width: 300px;
				background-color: whitesmoke;
			}

			/* 头部部分 */
			.phead {
				flex: 1;
				display: flex;
				align-items: center;
				padding-left: 20px;
				background-color: white;
			}

			/* 身体类容部分 */
			.pbody {
				overflow: auto;
				flex: 8;
				flex-direction: column;
			}

			.pbody::-webkit-scrollbar {
				display: none; //隐藏滑动条
			}

			.shop {
				margin-top: 5px;
				margin-left: 5px;
				border-radius: 5px;
				width: 290px;
				height: 100px;
				display: flex;
				background-color: white;
			}

			.checkbox_box {
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 2;
			}

			.img_box {
				flex: 7;
				display: flex;
				align-items: center;
				justify-content: center;

			}

			img {
				width: 80%;
				height: 80%;
				border-radius: 10px;
			}

			.name_box {
				position: relative;
				flex: 11;
				display: flex;
				flex-direction: column;
			}

			.jia,
			.jian {
				font-size: 18px;
				border: 1px solid grey;
				background-color: white;
				width: 20px;
				height: 20px;
			}

			.jia {

				border-radius: 0px 5px 5px 0;

			}

			.jian {
				border-radius: 5px 0px 0px 5px;
			}

			.number {
				text-align: center;
				width: 25px;
				height: 17px;
			}

			.name {
				flex: 1;
				display: flex;
				align-items: center;

			}

			.jg {
				margin-right: 10px;
				color: coral;
			}

			.shu {
				flex: 1;
				display: flex;
				align-items: center;
			}

			.drop {
				right: 5px;
				position: absolute;
				border-radius: 2px;
				width: 35px;
				height: 20px;
				font-size: 12px;
				border: 0;
				background-color: orange;
			}

			.btn_s {
				right: 5px;
				position: absolute;
				display: flex;
			}

			/* 底部全选框,总价格 显示,结算按钮*/
			.pbottom {
				font-size: 15px;
				color: grey;
				padding-left: 10px;
				flex: 1;
				display: flex;
				align-items: center;
				background-color: white;

			}

			/* 全部复选款按钮样式 */
			input[type='checkbox'] {
				width: 20px;
				height: 20px;
				background-color: #fff;
				-webkit-appearance: none;
				border: 2px solid gainsboro;
				border-radius: 50%;
			}

			/* 触发后样式 */
			input[type='checkbox']:checked {
				background: url("img/7.jpg") no-repeat;
				background-size: cover;
			}

			.p {
				margin-left: 5px;
			}

			.p1 {
				font-size: 12px;
				width: 70px;
				height: 24px;
				border: 0;
				background-color: coral;
				color: white;
				border-radius: 10px;
				margin-left: 70px;
			}

			.total_prices {
				color: orangered;
				font-size: 18px
			}

			.close_btn {
				font-size: 12px;
				margin-left: 10px;
				width: 70px;
				height: 24px;
				border: 0;
				background-color: coral;
				color: white;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div class="phead">商品页</div>
			<!-- 装商品的盒子 -->
			<div class="pbody">
				<!-- 商品骨架 -->

			</div>
			<!-- 底部按钮 -->
			<div class="pbottom">
				<input type="checkbox" class="all_checkbox"> <span class="p">全选</span>
				<button class="p1">打开购物车</button>
				<button class="close_btn">添加购物车</button>
			</div>
		</div>
	</body>
	<script>
		let data = [{
				name: "苹果13粉色",
				img: "img/1.jpg",
				price: "4599",
				number:1,
				index: 01
			},
			{
				name: "苹果14系列手机",
				img: "img/2.jpg",
				price: "7899",
				number: 1,
				index: 02
			},
			{
				name: "苹果14白色",
				img: "img/3.jpg",
				price: "8999",
				number: 1,
				index: 03
			},
			{
				name: "苹果13系列",
				img: "img/4.jpg",
				price: "5399",
				number: 1,
				index: 04
			},
			{
				name: "苹果SE3系列",
				img: "img/5.jpg",
				price: "2999",
				number: 1,
				index: 05
			},
			{
				name: "苹果手表",
				img: "img/6.jpg",
				price: "1399",
				number: 1,
				index: 06
			}
		];
		var mycart = [],mywindow
		let shopbox = document.querySelector('.pbody');
		let closeBtn = document.querySelector('.close_btn')
		// console.log(closeBtn)
		function myload() {
			shopbox.innerHTML = ''
			for (let i = 0; i < data.length; i++) {
				shopbox.innerHTML += `<div class="shop">
					<div class="checkbox_box"><input type="checkbox" class="checkbox"></div>
					<div class="img_box"><img src=${data[i].img} alt=""></div>
					<div class="name_box">
						<p class="name">${data[i].name}</p>
						<div class="shu">
							<span class="jg">￥${data[i].price}</span>
							<div class="btn_s">
							<button class="jian" onclick="fn.call(data[${i}],0)">-</button>
							<input type="text" class="number" value="${data[i].number}" onchange="fn1()" >
							<button class="jia" onclick="fn.call(data[${i}],1)">+</button>
							</div>
						</div>
					</div>
				</div>`
			}

		}
		window.onload = function() {
			myload()
		}
		let opencart = document.querySelector('.p1');
		opencart.onclick = function() {
			mywindow=window.open("mycart.html")
		}

		function fn(a) {
			// console.log('取到了')
			// console.log(this)
			a ? this.number++ : this.number-- //加减按钮判断
			if (this.number < 0) {
				this.number = 0
			} //input.value不小于0
			myload() //重新加载页面
		}

		function fn1() {
			let inp = document.querySelectorAll(".number")
			for (let i = 0; i < inp.length; i++) {
				data[i].number = Number(inp[i].value)
			}
		}
		closeBtn.onclick = function() {
			var ipt = document.querySelectorAll('.checkbox')
			console.log(ipt)
			for (let i = 0; i < ipt.length; i++) {
				if (ipt[i].checked) {
					let Objs = Object.assign({}, data[i])
					//Object.assian()将修改过后的number值与空对象合并并赋给Objs对象
					let flag = true;
					for (let j = 0; j < mycart.length; j++) {
						if (mycart[j] && mycart[j].index == Objs.index) {
							mycart[j].number += Objs.number;
							flag = false;
							break;
						}
					}
					if (flag) {
						mycart.push(Objs)
					}
				}
				console.log(mycart)
				mywindow.sonbox.innerHTML = ''
			}
			for (let i = 0; i < mycart.length; i++) {
				mywindow.sonbox.innerHTML += 
				`<div class="shop">
					<div class="checkbox_box"><input type="checkbox" class="checkbox" onclick="mysonIpt()"></div>
					<div class="img_box"><img src=${mycart[i].img} alt=""></div>
					<div class="name_box">
						<p class="name">${mycart[i].name}</p>
						<div class="shu">
							<span class="jg">￥${mycart[i].price}</span>
							<div class="btn_s">
							<button class='jian' onclick="fn(${i},${-1})">-</button>
							<input type="text" class="number" value="${mycart[i].number}" onchange="fn1()" >
							<button class='jia' onclick="fn(${i},${1})">+</button>
							<button class='mydel' onclick="mydelete(${i})">删除</button>
							</div>
						</div>
					</div>
				</div>`
			}

		}
	</script>
</html>